<template>
  <div class="messageList" id="messageList">
    <div style="overflow: hidden;margin-top:30px;">
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-badge :dot="show">
              <span :class="action ? 'actionTab' : ''">公告消息</span>
            </a-badge>
          </span>
          <div>
            <a-table
              class="tableClass"
              :showHeader="false"
              :columns="columns"
              :dataSource="arr"
              :pagination="false"
              :rowKey="record => record.ctime"
              :customRow="RowClick"
              size="middle"
              :rowClassName="rowClassName"
            >
              <span slot="transCode" slot-scope="record" style="text-align: right;">
                <img class="read_img" v-if="record.status === 2" src="static/img/unread.png" alt />
                <img class="read_img" v-else src="static/img/read.png" alt />
              </span>
              <span slot="head" slot-scope="record">
                <span style="color:#52506b;cursor: pointer;">{{record.head}}</span>
              </span>
            </a-table>
            <a-pagination
              @change="onPageChange"
              :current="pagination.current"
              :total="pagination.total"
              :pageSize="query.pageSize"
              style="margin-top: 10px"
            />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" forceRender>
          <span slot="tab">
            <a-badge :dot="sysshow">
              <span :class="!action ? 'actionTab' : ''">系统消息</span>
            </a-badge>
          </span>
          <div>
            <a-table
              class="tableClass"
              :showHeader="false"
              :columns="columns"
              :dataSource="systemArr"
              :pagination="false"
              :rowKey="record => record.ctime"
              size="middle"
              :rowClassName="rowClassName"
            >
              <span slot="transCode" slot-scope="record" style="text-align: right;">
                <img class="read_img" v-if="record.status === 2" src="static/img/unread.png" alt />
                <img class="read_img" v-else src="static/img/read.png" alt />
              </span>
              <span slot="head" slot-scope="record">
                <span
                  @click="record.status === 2 ? singleClick(record.id) : ''"
                  style="color:#52506b;cursor: pointer;"
                >{{record.content}}</span>
              </span>
            </a-table>
            <a-pagination
              @change="onPageChange"
              :current="systempagination.current"
              :total="systempagination.total"
              :pageSize="systemquery.pageSize"
              style="margin-top: 10px"
            />
          </div>
        </a-tab-pane>
        <a
          href="javascript:false;void(0);"
          slot="tabBarExtraContent"
          @click="setRead"
          style="cursor: pointer;float: right;"
        >全部设为已读</a>
      </a-tabs>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "图片",
    scopedSlots: { customRender: "transCode" },
    width: "7%",
    align: "center"
  },
  { title: "内容", scopedSlots: { customRender: "head" }, width: "73%" },
  { title: "时间", dataIndex: "ctime", width: "20%", align: "right" }
];
const data = [{}];
import api from "@/common/api";
export default {
  data() {
    return {
      data,
      columns,
      show: false,
      sysshow: false,
      messageType: "messageType1",
      list: {},
      action: true,
      arr: [],
      systemArr: [],
      // arrAll: [],
      // systemArrAll: [],
      pagination: { current: null, total: null },
      systempagination: { current: null, total: null },
      upId: [],
      sysupId: [],
      query: {
        page: 1,
        pageSize: 10,
        data: {}
      },
      systemquery: {
        page: 1,
        pageSize: 10,
        data: {}
      }
    };
  },
  mounted() {},
  activated() {
    this.getMessageList(1);
  },
  methods: {
    RowClick(record, index) {
      return {
        on: {
          click: () => {
            // console.log(index)
            // console.log(record)
            this.$router.push({
              path: "messageDetail",
              query: { id: record.id }
            });
          }
        }
      };
    },
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);

      if (this.action) {
        this.query.page = page;
        this.query.pageSize = pageSize;
        this.getMessageList(1);
      } else {
        this.systemquery.page = page;
        this.systemquery.pageSize = pageSize;
        this.getMessageList(2);
      }
    },
    getMessageList(value) {
      //公告消息
      if (value == "1") {
        api.messList(
          this.query,
          res => {
            if (res.data.code == "OK") {
              this.arr = res.data.list;
              this.pagination.current = res.data.current;
              this.pagination.total = res.data.total;
              this.upId = [];
              this.show = res.statusCount;
              this.arr.forEach((item, index) => {
                this.upId.push(item.id);
              });
            }
          },
          err => {}
        );
      } //系统消息
      else {
        api.systemMessList(
          this.systemquery,
          res => {
            if (res.data.code == "OK") {
              this.systemArr = res.data.list;
              this.systempagination.current = res.data.current;
              this.systempagination.total = res.data.total;
              this.sysupId = [];
              this.sysshow = res.statusCount;
              this.systemArr.forEach((item, index) => {
                this.sysupId.push(item.id);
              });
            }
          },
          err => {}
        );
      }
    },
    callback(key) {
      if (key == "2") {
        this.action = false;
        this.getMessageList(2);
      } else {
        this.action = true;
        this.getMessageList(1);
      }
    },
    setRead() {
      if (this.action) {
        let data = {
          upId: this.upId
        };
        api.changeMessStatus(
          data,
          res => {
            if (res.code == "OK") {
              this.getMessageList(1);
            } else {
            }
          },
          err => {}
        );
      } else {
        let data = {
          upId: this.sysupId
        };
        api.changesysMessStatus(
          data,
          res => {
            if (res.code == "OK") {
              let time = sessionStorage.getItem("loginTime");
              this.userName = sessionStorage.getItem("userName");
              this.$emit("changelogintime", time, false, this.userName, 0);
              this.getMessageList(2);
            } else {
              console.log(res.message);
            }
          },
          err => {}
        );
      }
    },
    singleClick(id) {
      let data = {
        upId: [id]
      };
      api.changesysMessStatus(
        data,
        res => {
          if (res.code == "OK") {
            let time = sessionStorage.getItem("loginTime");
            this.userName = sessionStorage.getItem("userName");
            let count = Number(sessionStorage.getItem("count"));
            this.getMessageList(2);
            if (count > 0) {
              count--;
              this.$emit("changelogintime", time, false, this.userName, count);
            }
          } else {
            console.log(res.message);
          }
        },
        err => {}
      );
    },
    goDetail(item) {
      this.$router.push({ path: "messageDetail", query: item });
    },
    rowClassName(record, index) {
      let className = "bg_white";
      if (index % 2 === 1) className = "dark-row";
      return className;
    }
  }
};
</script>
<style lang="less" scoped>
.messageList {
  padding: 50px;
  background: #fff;
}

.bg_white {
  background: #fff;
}

.dark-row {
  background: #f7f9fc;
}

.ant-table-tbody > tr > td {
  border: none;
}

.tableClass {
  border-top: 1px solid #e8e8e8;
}

.icon_title {
  /* font-size: 18px; */
  width: 19px;
  margin-right: 20px;
}

.actionTab {
  font-size: 16px;
  color: #52506b;
}

/deep/ .ant-tabs-bar {
  margin: 0 !important;
  border-bottom: none !important;
}

.read_img {
  width: 18px;
  height: 18px;
}
</style>